<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>继承，层叠，优先级</title>
    <style>
        div {
            color: cornflowerblue
        }

        ;
    </style>

</head>

<body>
    <div><b>继承</b>
        <h1>h1标题1</h1>
        <p>简单介绍的文字</p>
    </div>
    <div>二级div</div>
    <div class="list" style="color: aqua;">二级div</div>
    <div>
        <h1>优先级计算</h1>
        <p>a：类型选择器（例如，：h1）和伪类元素（例如::before）</p>
        <p>b：类型选择器（例如：.example），属性选择器（例如：[type="radio"]）和伪类（例如：hover）</p>
        <p>c：ID选择器（例如：#example）</p>
        <p>（c，b，a）</p>
        计算选择器优先级：html：（0，0，1）<br>body：（0，0，1）<br>div#first-div[title]：（1，1，1）<br>.how-much:hover：（0，2，0）<br>rem：（0，0，1）<br>em：（0，0，1）
    </div>
    <style>
        /* 继承 */
        body {
            color: red;
        }

        div:first-child {
            color: blue;
        }

        /* 层叠-赢在最后 */
        div.list {
            color: red;
            border: 1px solid;
            color: blue;
        }

        /* 优先级计算 */
        /* html */
        /* body */
        /* div#first-div[title] */
        /* .how-much:hover */
        /* rem */
        /* em */
    </style>
</body>

</html>